import React,{Component} from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";
import Home from "./router/home";
import User from "./router/user";
import Aboute from "./router/about";
import Login from "./router/login";


/**
 * switch 中的to 相当于path
 */
export default class RouterDemo  extends Component<any, any>{


    render(){
        return (
            <div>
                <Router>
                    {/*to与switch中的path相同*/}
                    <ul>
                        <li>
                            <Link to ={"/"}>home page</Link>
                        </li>
                        <li>
                            <Link to ={"/about"}>about page</Link>
                        </li>
                        <li>
                            <Link to ={"/user"}>
                                user page
                                <ul>
                                    <li>
                                       <Link to={"/user/list"}>
                                           user list
                                       </Link>
                                    </li>
                                    <li>
                                        <Link to={"/user/detail"}>
                                            user Detail
                                        </Link>
                                    </li>
                                </ul>
                            </Link>
                        </li>
                        <li>
                        <Link to={"/login"}>login page</Link>
                        </li>
                    </ul>

                    <Switch>
                        {/*精确的匹配*/}
                        <Route path="/" exact={true}>
                            <Home/>
                        </Route>
                        <Route path="/user">
                            <User/>
                        </Route>
                        <Route path="/about">
                            <Aboute/>
                        </Route>
                        <Route path="/login">
                            <Login/>
                        </Route>
                    </Switch>
                </Router>

            </div>
        )
    }
}
